<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div style="text-align: center">
        <img style="border-radius: 50%" height="100px" width="100px" src="https://img1.baidu.com/it/u=1145462519,1694762378&fm=26&fmt=auto" alt="">
        <div>
            <h2>Gin Todo List</h2>
            <p>golang + gin + gorm 完成的 demo</p>
        </div>
    </div>
    <input type="text" class="newInput">
    <button class="addBtn">添加新的TODO</button>
    <button class="deleteHasDone">清空已完成</button>
    <ul id="todoWrapper">

    </ul>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    
    input {
        margin: 10px;
        width: 50%;
        padding: 10px;
        font-size: 15px;
    }
    
    button {
        padding: 10px;
        cursor: pointer;
        background: #ffffff;
        outline: none;
        border: 1px solid #f00;
    }
    
    button:active {
        border: 1px solid #f00;
        background: blueviolet;
        color: #ffffff;
    }
    
    ul {
        list-style: none;
    }
    
    li {
        margin: 10px;
        padding: 10px;
        cursor: pointer;
        transition: all .4s ease;
    }
    
    li:hover {
        padding: 30px 10px;
        font-size: 20px;
    }
    
    .hasDone {
        text-decoration: line-through;
        background: #f3f300;
    }
    
    .hasDone::after {
        content: "已完成";
        font-size: 20px;
        background: #f00;
        padding: 0px 10px;
    }
    
    .notDone {
        background: #5c68ec;
        color: #fff;
    }
    
    .notDone:nth-child(2n+1) {
        background: #919af1;
    }
    
    .notDone::after {
        content: "代办";
        font-size: 20px;
        background: #0939e7;
        padding: 0px 10px;
    }
</style>
<script>
    $(document).ready(function() {
        function doGetAllTodoItem() {
            $.ajax({
                url: "http://120.79.174.83:8989/todo",
                method: "get",
                success: function(res) {
                    $("#todoWrapper").empty()
                    res.data.forEach(item => {
                        const newItem = document.createElement("li")
                        newItem.setAttribute("id", item.id)
                        newItem.setAttribute("class", item.status ? 'hasDone' : "notDone")
                        if (!item.status) {
                            newItem.innerHTML = "<p>" + item.name + "</p>" + "<span>" + "创建时间:" + item.created_at + "</span>"
                        } else {
                            newItem.innerHTML = "<p>" + item.name + "</p>" + "<span>" + "完成时间:" + item.done_at + "</span>"
                        }
                        $("#todoWrapper").append(newItem)
                    })
                }
            })
        }

        doGetAllTodoItem()

        function doAddItem() {
            const val = $(".newInput")[0].value
            $.ajax({
                url: "http://120.79.174.83:8989/todo",
                data: {
                    name: val
                },
                method: "post",
                success: function(res) {
                    doGetAllTodoItem()
                }
            })
        }

        $(".addBtn").click(doAddItem)

        function markHasDone(e) {
            e.preventDefault()
            e.stopPropagation()
            const aimNode = e.target
            const itemId = aimNode.getAttribute("id")
            if (itemId) {
                var hasConfirm = confirm("确定已经完成了吗？");
                if (hasConfirm) {
                    $.ajax({
                        url: "http://120.79.174.83:8989/todo/" + itemId,
                        method: "put",
                        success: function() {
                            doGetAllTodoItem()
                        }
                    })
                }

            }
        }

        $('#todoWrapper').click(markHasDone)

        function deleteHasDone() {
            if (confirm("确定删除已完成的事项吗？")) {
                $.ajax({
                    url: "http://120.79.174.83:8989/todo/hasDone",
                    method: "delete",
                    success: function(res) {
                        doGetAllTodoItem()
                    }
                })
            }
        }
        $(".deleteHasDone").click(deleteHasDone)
    });
</script>

</html>